<template>
    <div class="container">
        <div class="resultBox">
            <template v-for="(item, index) in records">
                <Card :relationId="item.relationId">
                <template #name>
                    {{item.studentName}}
                </template>
                <template #courseName>
                    {{ item.courseName }}
                </template>
                </Card>
            </template>
        </div>
        <div class="pagination">
        <Pagination ref="pageData" @changePage="changePage"></Pagination>
    </div>
    </div>
</template>
<script setup>
import { onMounted, ref, getCurrentInstance } from 'vue';
import Pagination from './Pagination.vue';
import { getUserData } from '../utils';
import Card from '../components/StudentItemCard.vue'
import { useRouter } from 'vue-router';


// 获得用户信息
// 获得用户信息
let userData = {
    Token: '',
    avatar: '',
    id: '',
    role: ''
}
if (getUserData() != undefined) {
    userData = getUserData();
}

const http = getCurrentInstance()?.appContext.config.globalProperties.$http

//得到的结果
const records = ref()

// 分页对象
const pageData = ref()

//重新获得页面数据
const changePage = function (pd) {
    fetch(http + '/tec/guide/student?' + 'current=' + pd.current + '&pageSize=' + pd.pageSize, {
        method: 'get',
        headers: {
            "Token": userData.Token,
            'Content-Type': 'application/json; charset=utf-8'
        },
        responseType: 'json',
    }).then((response) => {
        return response.json()
    }).then((data) => {
        data = data.data
        records.value = data.records

        //生成分页
        pageData.value.changePage(data)
    }).catch((err) => {
        console.log(err);
    })
}


//去学生单人页面
const router = useRouter();
const goManageStudent = function(){
    router.push('/ManageStudent')
}


onMounted(() => {
})
</script>
<style scoped>
.container{
    width: 100%;
    height: 100%;
    margin-top: -2%;
}
.resultBox{
    width: 100%;
    height: 90%;
}
.pagination {
    width: 100%;
    height: 10%;
    display: flex;
    justify-content: flex-end;
    margin-top: 3%;
}
</style>